<template>
	<view>
		<uni-popup ref="popup" :is-mask-click="false" type="center">
			<view class="fs-14 text-color-regular font-normal">
				<view class="flex justify-end mb-12">
					<image class="size-32" src="@/static/svg/icon-close.svg" @click.stop="showPopup(false)"></image>
				</view>
				<view class="uni-bg-white radius-12 p-20" style="width:80vw;">
					<view class="fs-16 font-medium text-center mb-12">移至分组</view>
					<view v-for="item in groupList" class="agent-box flex justify-between item-center" :key="item.id" @click="checkGroupId = item.id">
						<view class="nick-name flex item-center justify-between">
							{{item.groupName}}
						</view>
						<image v-if="item.id === checkGroupId" class="size-14" src="@/static/svg/activity/icon-radio-check-blue.svg"></image>
						<image v-else class="size-14" src="@/static/svg/activity/icon-radio-default.svg"></image>
					</view>
					<view class="flex item-center justify-between">
						<view class="release-btn" style="width:50%;background: #F5F5F5;color: #333333;" @click="showPopup(false)">取消</view>
						<view class="release-btn" style="width:50%" @click="submit">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { selectList, batchChangeGroup } from '@/pagesD/api/group.js'
	import {
		ref,
		toRaw,
		onMounted
	} from 'vue'

	const emits = defineEmits(['onSubmit'])
	const popup = ref(null)
	const show = ref(false)
	const checkGroupId = ref('')
	const props = defineProps({
		currentGroupId: {
			type: String
		},
	})
	let groupList = ref([])
	let ids = []
	
	const getGroupList = async () => {
		let result = await selectList()
		if (result) {
			if(props.currentGroupId){
				result = result.filter((item) => item.id != props.currentGroupId)
			}
			groupList.value = result
		}
	}

	const showPopup = (val, arr) => {
		if (val) {
			if(!groupList.value.length){
				uni.showToast({icon: 'none',title: '无可移动的分组'})
				return
			}
			ids = arr
			popup.value.open()
		} else {
			popup.value.close()
		}
	}

	const submit = async () => {
		if(!checkGroupId.value) return uni.showToast({icon: 'none',title: '请选择分组'})
		let result = await batchChangeGroup({groupId: checkGroupId.value, userIds: ids})
		if(result){
			showPopup(false)
			emits('onSubmit')
		}
	}
	onMounted(()=>{
		getGroupList()
	})

	defineExpose({
		showPopup
	})
</script>

<style lang="scss" scoped>
	.agent-box {
		padding: 8px 0px;
		background-color: #ffffff;
		border-radius: 8px;
		.nick-name {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}
	}
	.release-btn {
		height: 36px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #FA4543;
		color: #ffffff;
		margin: 5px 20px;
		text-align: center;
		line-height: 36px;
		&.unactive{
			background: rgba(250, 69, 67, 0.6);
		}
	}
</style>